<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>









 
 
 
 
  





  
    
<meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Creating Orkut-styled Tabs - Orkut Developer Home - Google Code</title>

<script type="text/javascript">
(function(){function a(){this.t={};this.tick=function(c){this.t[c]=(new Date).getTime()};this.tick("start")}var b=new a;window.jstiming={Timer:a,load:b};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;})();

var _tocPath_ = '/apis/orkut/_toc.ezt';
</script>
<link href="tabs_files/codesite.css" type="text/css" rel="stylesheet">
<script src="tabs_files/codesite.js" type="text/javascript"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Google Code" href="http://code.google.com/osd.xml"><!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css" /><![endif]--></head><body class="gc-documentation">

    
    
    <div id="gc-container">
<a name="top"></a>
<div id="skipto">
  <a href="#gc-pagecontent">Skip to page content</a>
  <a href="#gc-toc">Skip to main navigation</a>
</div>
<div id="langpref">    
   <a style="text-decoration: none; cursor: pointer;" class="dropdown" href="http://code.google.com/"><span class="title1219980324984" style="text-decoration: underline;">English</span><span style="vertical-align: middle; text-decoration: none; font-family: arial,sans-serif; font-size: 11px;">&nbsp;▼</span></a>
   <span>|</span>
   <a href="http://code.google.com/more/">Site Directory</a>
</div>
<div id="gc-header">
  <div id="logo"><a href="http://code.google.com/">
  
     <img src="tabs_files/cleardot.gif" alt="Google Code Home Page" id="gc-logo-img" height="1" width="1">
  
  </a></div>
  <div id="search">
    <div id="searchForm" class="searchForm" style="">
      <form action="" accept-charset="utf-8" class="gsc-search-box" onsubmit="executeGSearch(document.getElementById('gsearchInput').value); return false;">
        <table class="gsc-search-box" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="gsc-input">
                <input id="gsearchInput" name="q" maxlength="2048" class="gsc-input" autocomplete="off" title="Google Code Search" style="width: 345px;" type="text">
              </td>
              <td class="gsc-search-button">
                <div id="cs-searchresults" onclick="event.cancelBubble = true;"></div>
                <input title="Search" id="gsearchButton" class="gsc-search-button" value="Search" type="submit">
              </td>
            </tr>
            <tr>
              <td class="greytext">e.g. "ajax apis" or "open source"</td>
            </tr>
          </tbody>
        </table>
      </form>
    </div> <!-- end searchForm -->
    <div id="searchForm2" class="searchForm2" style="display: none;">
      <form id="cse" action="http://www.google.com/cse">
        <input name="cref" value="http://code.google.com/cse/googlecode-context.xml" type="hidden">
        <input name="q" maxlength="2048" autocomplete="off" title="Google Code Search" style="width: 345px;" type="text">
        <input name="sa" value="Search" title="Search" type="submit"><br>
        <div class="greytext">e.g. "ajax apis" or "open source"</div>
      </form>
    </div> <!-- end searchForm2 -->
  </div> <!-- end search -->
</div> <!-- end gc-header -->


<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>
<div id="gc-topnav">
  <h1>Orkut Developer Home</h1>
  <ul id="articles" class="gc-topnav-tabs">

    <li id="home_link">
      <a href="http://code.google.com/apis/orkut/" title="Orkut Developer Home home page">Home</a>
    </li>
  
    <li id="docs_link">
      <a href="http://code.google.com/apis/orkut/docs/index.html" title="Official Orkut Developer Home documentation">Docs</a>
    </li>
  
    <li id="articles_link">
      <a href="http://code.google.com/apis/orkut/articles/" class="selected" title="Focused articles and tutorials for Orkut Developer Home developers">Articles</a>
    </li>
  
    <li>
      <a href="http://orkutdeveloper.blogspot.com/" title="Official Orkut Developer Home blog">Blog</a>
    </li>
  
    <li>
      <a href="http://code.google.com/apis/orkut/docs/resources.html#groups" title="Orkut Developer Home developer forum">Group</a>
    </li>
  
    <li>
      <a href="http://www.orkut.com/DeveloperTerms.aspx" title="Orkut Developer Home terms of service">Terms</a>
    </li>
  

  </ul>
</div> <!-- end gc-topnav -->

    <div class="g-section g-tpl-210">

      <a name="gc-toc"></a>
      <div class="g-unit g-first" id="gc-toc">
        
<ul class="treelist tlw-nested-only tlw-processed tlw-instance-0">
  <li><h2 class="tlw-ignore"><a href="http://code.google.com/apis/orkut/docs/index.html">Documentation</a></h2>
    <ul>
      <li><a href="http://code.google.com/apis/orkut/docs/orkutdevguide.html">Orkut Developer's Guide</a></li>
      <li><a href="http://code.google.com/apis/opensocial/docs/devguide.html">OpenSocial Developer's Guide</a></li>
      <li><a href="http://code.google.com/apis/orkut/docs/orkutdevguidelines.html">Orkut Developer Guidelines</a></li>
      <li style="padding-top: 0pt; padding-bottom: 0pt;">
        <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Articles &amp; Tutorials"><img src="tabs_files/cleardot.gif" alt="Expand Articles &amp; Tutorials" class="tlw-control tlw-plus"></a><span class="tlw-title">Articles &amp; Tutorials</span></div><ul style="display: none;" id="0-sub-0">
          <li><a href="http://code.google.com/apis/orkut/articles/tutorial/">OpenSocial Tutorial for Orkut</a></li>
          <li><a href="http://code.google.com/apis/orkut/articles/anatomy.html">Anatomy of an Orkut App</a></li>
          <li><a href="http://code.google.com/apis/orkut/articles/latency.html">Latency Tips for Orkut</a></li>
        </ul>
      </li><li style="padding-top: 0pt; padding-bottom: 0pt;">
        <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Reference Materials"><img src="tabs_files/cleardot.gif" alt="Expand Reference Materials" class="tlw-control tlw-plus"></a><span class="tlw-title">Reference Materials</span></div><ul style="display: none;" id="0-sub-1">
          <li><a href="http://code.google.com/apis/opensocial/docs/0.7/reference/">JavaScript API Reference</a></li>
          <li><a href="http://code.google.com/apis/opensocial/docs/0.7/spec.html">OpenSocial Specification</a></li>
          <li><a href="http://code.google.com/apis/gadgets/docs/spec.html">Gadgets Specification</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><h2 class="tlw-ignore"><a href="http://code.google.com/apis/orkut/docs/resources.html">Support Resources</a></h2>
    <ul>
      <li><a href="http://code.google.com/apis/orkut/docs/resources.html#groups">Developer Forums</a></li>
      <li><a href="http://code.google.com/p/opensocial-resources/wiki/IssuesTab">Issue Tracker</a></li>
    </ul>
  </li>
  <li><h2 class="tlw-ignore">News &amp; Updates</h2>
    <ul>
      <li><a href="http://orkutdeveloper.blogspot.com/">Orkut Developer Blog</a></li>
      <li><a href="http://opensocialapis.blogspot.com/">OpenSocial Blog</a></li>
    </ul>
  </li>
</ul>


      </div>

      <a name="gc-pagecontent"></a>
      <div style="position: relative;" class="g-unit" id="gc-pagecontent">
        <h1 class="page_title">Creating Orkut-styled Tabs</h1>


<em>
  Dan Holevoet, OpenSocial Team
  <br>
  March 2008
</em>

<h2>Overview</h2>

<p>Readers familiar with writing gadgets for iGoogle are probably familiar with the built-in <a href="http://code.google.com/apis/gadgets/docs/reference.html#Ref_Tabs">tabs feature</a>, but may not know that this same feature, with some <a href="http://code.google.com/apis/opensocial/docs/0.7/reference/gadgets.TabSet.html">new syntax</a>,
is included within OpenSocial. By including the tabs feature in your
code, and making some small adjustments to the default code, your
application can have tabs that behave just like they are part of the
orkut UI. This little bit of polish will go a long way towards making
your application look at home inside of orkut.</p>

<h2>Initializing the Tabs</h2>

<p>The first thing your gadget needs to do is to include the
appropriate files. The tabs feature is built into gadgets, so adding it
to your application is easy. Include <code>&lt;Require feature="tabs" /&gt;</code> in your <code>&lt;ModulePrefs&gt;</code> section, and all of the appropriate JavaScript will be loaded with your application.</p>

<p>Now, create a global variable <code>tabs</code> to hold the tab
object, and an initialization function that can be used as a jumping
off point once the DOM has been loaded. Inside the function, call the <code>gadgets.TabSet</code> constructor to initialize the tabs.</p>

<pre>var tabs = null;

gadgets.util.registerOnLoadHandler(onLoadHandler);

function onLoadHandler() {
  tabs = new gadgets.TabSet(__MODULE_ID__, null, document.getElementById('tabs_div'));
}
</pre>

<p>The initialization code passes in a number of parameters. The first two, <code>__MODULE_ID__</code> and <code>null</code>
are simply placeholder values that must be specified in order to
specify a third parameter. The third parameter instructs the tab
feature to insert tabs within the DOM object given, in this case, a tag
with id of <code>tabs_div</code>. You should add such a tag to your XML file.</p>

<pre>&lt;div id="tabs_div"&gt;&lt;/div&gt;
</pre>

<p>Lastly create new tab objects inside of the <code>onLoadHandler</code>
function for each of the tabs you'd like to see on the page. As an
example, here are two tabs, one called "friends" and another called
"messages."</p>

<pre>var params = {
  callback: changeSelectedTab
};

params.contentContainer = document.getElementById('friends');
tabs.addTab('Friends', params);

params.contentContainer = document.getElementById('messages');
tabs.addTab('Messages', params);
</pre>

<p>The <code>addTab</code> function takes two arguments. The first
argument is the name of the tab. The second argument is a list of
optional parameters. The first of the two optional parameters is the
callback function that's executed whenever a tab is clicked, to make
visual modifications to the tabs. The second parameter is the DOM
element that contains each tab's content. Because both tabs have their
content held within distinct <code>div</code> tags, the DOM element is changed before the addition of each tab.</p>

<p>You should make sure to add <code>&lt;div&gt;</code> tags in your XML for each of these tabs. The HTML for the above tabs would look like this:</p>

<pre>&lt;div id='friends'&gt;Hi!&lt;/div&gt;
&lt;div id='messages'&gt;Hey!&lt;/div&gt;
</pre>

<p>When the "friends" tabs is selected, the message "Hi!" appears, because that is the content of the <code>&lt;div id='friends'&gt;</code> DOM element. Likewise, when "messages" is clicked, the word "Hey!" appears.</p>

<h2>Making Display Changes</h2>

<p>Now that you've constructed your tabs, you'll need to start making
some changes to their display to match orkut's look and feel. First,
make the tabs align to the left of the page.</p>

<pre>tabs.alignTabs('left', 2);
</pre>

<p>Next, you'll need to iterate through each of the created tab
elements to properly assign styles to the new tabs (to create the
rounded look of orkut tabs). The <code>tabs_div_header</code> element
is created automatically when you create new tabs, so you do not need
to add this to your code. The CSS classes that the code is using to
make visual modifications are also part of the generated tabs.</p>

<pre>var tabHeaders = document.getElementById('tabs_div_header').rows[0].cells;
var value = null;
var html = null;
for (var i in tabHeaders) {
  if (tabHeaders[i].className &amp;&amp; tabHeaders[i].className.match(/tablib_selected/)) {
    value = tabHeaders[i].innerHTML;
    html = "&lt;span class='tablib_extension_left_selected'&gt;&lt;/span&gt; " + value;
    tabHeaders[i].innerHTML = html;
  }
  if (tabHeaders[i].className &amp;&amp; tabHeaders[i].className.match(/tablib_unselected/)) {
    value = tabHeaders[i].innerHTML;
    html = "&lt;span class='tablib_extension_left_unselected'&gt;&lt;/span&gt; " + value;
    tabHeaders[i].innerHTML = html;
  }
}
</pre>

<p>Now, include the code of the callback function <code>changeSelectedTab</code>. This function is called when you change tabs.</p>

<pre>function changeSelectedTab() {
  if (document.getElementById('tabs_div_header')) {
    var tabHeaders = document.getElementById('tabs_div_header').rows[0].cells;
    for (var i in tabHeaders) {
      if (tabHeaders[i].className &amp;&amp; tabHeaders[i].className.match(/tablib_selected/)) {
        if (tabHeaders[i].childNodes[0].className) {
          tabHeaders[i].childNodes[0].className = 'tablib_extension_left_selected';
        }
      }
      if (tabHeaders[i].className !== undefined &amp;&amp; tabHeaders[i].className.match(/tablib_unselected/)) {
        if (tabHeaders[i].childNodes[0].className) {
          tabHeaders[i].childNodes[0].className = 'tablib_extension_left_unselected';
        }
      }
    }
  }
}
</pre>

<p>This function behaves similarly to the code executed just after your
gadget creates tabs. When a tab change occurs, it iterates through each
of the existing tabs and swaps the styles of the previously selected
and unselected tabs. The tabs feature itself handles part of this swap,
but a second function call is required to handle the rounded edges.</p>

<h2>Giving it Style</h2>

<p>The only remaining change is to include appropriate CSS styles and
images to skin the tabs. All of these styles are defined in your
application when you include tabs. The following CSS just overwrites
the default settings to make the tabs look like orkut's tabs.</p>

<p>These can be copied and pasted directly into your existing
stylesheet or into your gadget (when properly wrapped as CSS).
Alternatively, you can link directly to the <a href="http://opensocial-resources.googlecode.com/svn/samples/orkut_ui/tabs.css">stylesheet</a>.</p>

<pre>.tablib_extension_left_selected, .tablib_extension_left_unselected {
  height: 23px;
  width: 6px;
  float: left;
}
.tablib_extension_left_selected {
  background-image: url(http://opensocial-resources.googlecode.com/svn/samples/orkut_ui/img/tabsel_l.gif);
}
.tablib_extension_left_unselected {
  background-image: url(http://opensocial-resources.googlecode.com/svn/samples/orkut_ui/img/tabnotsel_l.gif);
}
.tablib_selected, .tablib_unselected {
  font-size: 12px;
  font-height: 23px;
  text-transform: lowercase;
  height: 23px;
  line-height: 23px;
  font-family: Verdana,Arial,sans-serif;
  font-weight: 700;
  margin: 0px;
  padding: 0px;
  padding-right: 6px;
  width: auto;
  border: 0px;
  border-bottom: 1px solid #86A1C4;
}
.tablib_selected {
  background: url(http://opensocial-resources.googlecode.com/svn/samples/orkut_ui/img/tabsel_r.gif) no-repeat center right;
  color: #FFFFFF;
}
.tablib_unselected {
  background: url(http://opensocial-resources.googlecode.com/svn/samples/orkut_ui/img/tabnotsel_r.gif) no-repeat center right;
  color: #02679C;
}
td.tablib_unselected:hover {
  color: #00344F;
  text-decoration: underline;
}
.tablib_spacerTab, .tablib_emptyTab {
  border-bottom: 1px solid #86A1C4;
}
.tablib_emptyTab {
  width: 500px;
}
</pre>

<p>Note that the image references are pointing to the
opensocial-resources code project, but you can copy the images locally
(just make sure to change the URLs in the styles).</p>

<p>Also note that the <code>.tablib_emptyTab</code> style has a set width of <code>500px</code>.
This width should be adjusted based on the number of tabs you wish to
display and the width of each tab. If you wish to change the number or
names of visible tabs after the gadget is loaded, you should also
adjust the width in this style.</p>

<h2>Good to Go</h2>

<p>Now, if you load up your gadget, you should see a set of
fully-functional tabs that look and feel just like tabs in orkut's UI.
You're now one step closer to having an application that looks right at
home. To see this code in action, load the <a href="http://opensocial-resources.googlecode.com/svn/samples/orkut_ui/tabs.xml">gadget XML</a> within the <a href="http://sandbox.orkut.com/">orkut sandbox</a>.</p>


      <div style="height: 2913px;" id="gc-collapsible"></div></div><!-- end gc-pagecontent -->
   </div><!-- end gooey wrapper -->

    </div> <!-- end codesite content -->

<div id="gc-footer" dir="ltr"> 
  <div class="text">
    
    ©2008 Google -
    <a href="http://code.google.com/">Code Home</a> -
    <a href="http://www.google.com/accounts/TOS">Site Terms of Service</a> -
    <a href="http://www.google.com/privacy.html">Privacy Policy</a> -
    <a href="http://code.google.com/more/">Site Directory</a>
     <br>
     <br>
    Google Code offered in:  
    <a href="http://code.google.com/intl/zh-CN/">中文</a> - 
    <a href="http://code.google.com/">English</a> - 
    <a href="http://code.google.com/intl/pt-BR/">Português</a> - 
    <a href="http://code.google.com/intl/ru/">Pусский</a> - 
    <a href="http://code.google.com/intl/es/">Español</a> - 
    <a href="http://code.google.com/intl/ja/">日本語</a> </div><!-- end gc-footer -->
  </div>
</div><!-- end gc-containter -->
<script src="tabs_files/ga.js" type="text/javascript">
</script>
<script type="text/javascript">
  try {
    var pageTracker = _gat._getTracker("UA-18071-1");
    pageTracker._setAllowAnchor(true);
    pageTracker._initData();
    pageTracker._trackPageview(); 
  } catch(e) {}
</script>




  <select size="6" style="position: absolute; display: none;" class="fauxSelect"><option value="zh-CN">中文 (简体)</option><option value="en">English</option><option value="pt-BR">Português (Brasil)</option><option value="ru">Pусский</option><option value="es">Español</option><option value="vi">Tiếng Việt</option><option value="ja">日本語</option></select><div id="gc-collapsible-arrow"></div><div id="cs-searchresults"><div id="cs-recommended">Suggestions</div><div id="searchResult1"></div><div id="searchResult2"></div><div id="searchResult3"></div><div id="searchResult4"></div><div id="searchResult5"></div><div id="searchResult6"></div><div id="searchResult7"></div></div></body></html>